<script>
import {
  getBatch, getProduct_receipt,
  getSaCode,
  getSlCode,
  getWCode,
  getWorkOrder, updateProduct_receipt
} from '@/api/yyj/wm/inbound/product_receipt'

export default {
  dicts: ['gbs_good_type'],
  data() {
    const equalsToNum = (rule, value, callback) => {
      const regex = /^\d+$/;
      if (!regex.test(value)) {
        callback(new Error('入库数量必须为数字'));
      } else {
        callback();
      }
    };
    return {
      // 工单集合
      orderList: [],
      // 批次集合
      batchList: [],
      // 仓库集合
      warehouseList: [],
      // 库区集合
      areaList: [],
      // 库位集合
      locationList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        prCode: null,
        prName: null,
        prReceiptDate: null,
        prOrderCode: null,
        prOrderName: null,
        prDesc: null,
        prProductCode: null,
        prBatch: null,
        prReceiptNum: null,
        prProductionDate: null,
        prExpirationDate: null,
        prProductName: null,
        prStoLocation: null,
        prStatus: null,
        pdCode: null,
        wCode: null,
        orderVo: null,
        productVo: null,
        prGoodType: null,
      },
      // 表单参数
      form: {},
      // 工单弹出层表单
      orderForm: {},
      // 仓库弹出层表单
      warehouseForm: {},
      // 表单验证规则
      rules: {
        prName: [
          { required: true, message: "入库单名称不能为空", trigger: "blur" }
        ],
        prReceiptDate: [
          { required: false, message: "入库时间不能为空", trigger: "blur" }
        ],
        prOrderCode: [
          { required: false, message: "工单编号不能为空", trigger: "blur" }
        ],
        prOrderName: [
          { required: true, message: "工单名称不能为空", trigger: "blur" }
        ],
        prBatch: [
          { required: true, message: "批次号不能为空", trigger: "blur" }
        ],
        prReceiptNum: [
          { required: true, message: "入库数量不能为空", trigger: "blur" },
          { required: true, validator: equalsToNum, trigger: "blur"}
        ],
        prStoLocation: [
          { required: true, message: "库位编号不能为空", trigger: "blur" }
        ],
        prStatus: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
      },
      // 工单搜索标题
      orderSearchTitle: '选择生产工单',
      // 是否显示弹出层
      orderSearchOpen: false,
      // 工单总条数
      orderTotal: 0,
      // 工单弹出层加载状态
      orderLoading: false,
      // 工单表是否被选择
      isOrderSelected: false,
      // 批次号遮罩层
      batchLoading: false,
      // 仓库搜索标题
      warehouseSearchTitle: '选择仓库',
      //是否显示弹出层
      warehouseSearchOpen: false,
      // 仓库确定按钮禁用
      isWarehouseSelected: false,
    }
  },
  computed: {
    getGbsGoodType() {
      return this.dict.type.gbs_good_type
    },
    startDateOptions() {
      return {
        disabledDate: (date) => {
          if (this.form.prExpirationDate) {
            return date > new Date(this.form.prExpirationDate);
          }
          return false;
        }
      };
    },
    endDateOptions() {
      return {
        disabledDate: (date) => {
          if (this.form.prProductionDate) {
            return date < new Date(this.form.prProductionDate);
          }
          return false;
        }
      };
    }
  },
  created() {
    this.reset();
    this.orderReset();
    this.getData();
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        prCode: null,
        prName: null,
        prReceiptDate: null,
        prOrderCode: null,
        prOrderName: null,
        prDesc: '',
        prProductCode: null,
        prBatch: null,
        prReceiptNum: null,
        prProductionDate: null,
        prExpirationDate: null,
        prStoLocation: null,
        prStatus: null,
        prProductName: null,
        prProductSpecType: null,
        prGoodType: null,
        prProductUnitName: null,
        prWName: null,
        wManager: null,
      };
      this.resetForm("form");
    },
    orderReset() {
      this.orderForm = {
        prCode: null,
        prName: null,
        prReceiptDate: null,
        prOrderCode: null,
        prOrderName: null,
        prDesc: null,
        prProductCode: null,
        prBatch: null,
        prReceiptNum: null,
        prProductionDate: null,
        prExpirationDate: null,
        prStoLocation: null,
        prStatus: null,
        prProductName: null,
        prProductSpecType: null,
        prGoodType: null,
        prProductUnitName: null,
        prWName: null,
        wManager: null,
        orderVo: null,
        productVo: null,
      };
      this.resetForm("orderForm");
    },
    warehouseReset() {
      this.warehouseForm = {
        wCode: null,
        wName: null,
        saCode: null,
        saName: null,
        slCode: null,
        slName: null,
        wManager: null,
      };
      this.resetForm("warehouseForm");
    },
    // 查询入库单详情
    getData() {
      const prCode = this.$route.query.prCode;
      getProduct_receipt(prCode).then(response => {
        const data = response.data;
        this.form = data;
        this.form.wManager = data.wmanager;
        this.form.prWName = data.prWName + ' / ' + data.prSaName + ' / ' + data.prSlName;
      })
    },
    // 工单搜索事件
    handleOrderSearch() {
      this.orderReset();
      this.orderSearchOpen = true;
      this.getOrderList();
    },
    // 工单查询
    handleOrderQuery() {
      this.queryParams.pageNum = 1;
      this.getOrderList();
    },
    // 查询工单列表
    getOrderList() {
      this.orderLoading = true;
      this.orderList = [];
      getWorkOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.orderTotal = response.total;
        this.orderLoading = false;
        this.isOrderSelected = false;
      })
    },
    // 重置工单查询
    resetOrderQuery() {
      this.resetForm('queryForm');
      this.queryParams.prGoodType = null;
      this.handleOrderQuery();
    },
    // 工单表格选择
    handleOrderTableChange(currentRow) {
      this.orderForm = currentRow;
      this.isOrderSelected = true;
    },
    // 工单弹出层关闭事件
    handleOrderClose() {
      this.resetForm('queryForm');
      this.orderReset();
      this.queryParams.prGoodType = null;
      this.isOrderSelected = false;
      this.orderSearchOpen = false;
    },
    // 工单弹出层确定事件
    handleOrderConfirm() {
      this.form.prOrderCode = this.orderForm.prOrderCode;
      this.form.prOrderName = this.orderForm.prOrderName;
      this.form.prProductCode = this.orderForm.prProductCode;
      this.form.prProductName = this.orderForm.prProductName;
      this.form.prProductSpecType = this.orderForm.prProductSpecType;
      this.form.prGoodType = this.orderForm.prGoodType;
      this.form.prProductUnitName = this.orderForm.prProductUnitName;
      this.handleOrderClose();
    },
    // 页面提交事件
    handlePageSubmit() {
      this.$modal.confirm("确认提交?").then(() => {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.form.prStatus = 1;
            updateProduct_receipt(this.form).then(() => {
              this.$message.success("操作成功");
              this.handlePageClose();
            }).catch(() => {})
          }
        })
      })
    },
    // 页面退出事件
    handlePageClose() {
      this.$tab.closeOpenPage();
      this.$tab.refreshPage({
        path: '/wm/inbound/product_receipt'
      });
    },
    // 批次号查询事件
    handleBatchSearch(querySearch) {
      this.batchList = [];
      this.batchLoading = true;
      getBatch(querySearch).then(response => {
        this.batchList = response.data;
        this.batchLoading = false;
      })
    },
    // 批次号点击事件
    handleBatchVisibleChange(visible) {
      if (visible) {
        this.handleBatchSearch();
      }
    },
    // 仓库弹出层开启事件
    handleWarehouseSearch() {
      this.warehouseSearchOpen = true;
      this.isWarehouseSelected = false;
    },
    // 仓库弹出层关闭事件
    handleWarehouseClose() {
      this.warehouseSearchOpen = false;
      this.warehouseReset();
      this.warehouseList = [];
      this.areaList = [];
      this.locationList = [];
    },
    // 仓库弹出层确定事件
    handleWarehouseConfirm() {
      this.form.prStoLocation = this.warehouseForm.slCode;
      this.form.prWName = this.warehouseForm.wName + ' / ' + this.warehouseForm.saName + ' / ' + this.warehouseForm.slName;
      this.form.wManager = this.warehouseForm.wManager;
      this.handleWarehouseClose();
    },
    // 仓库下拉框焦点事件
    handleWarehouseVisibleChange(visible) {
      if (visible) {
        const query = {
          saCode: this.warehouseForm.saCode,
          slCode: this.warehouseForm.slCode
        };
        this.getWarehouseList(query);
      }
    },
    // 查询仓库列表
    getWarehouseList(query) {
      this.warehouseList = [];
      getWCode(query).then(response => {
        this.warehouseList = response.data;
      })
    },
    // 仓库选择事件
    handleWarehouseChange(val) {
      this.warehouseForm.wCode = val;
      this.warehouseForm.wManager = this.warehouseList.find(item => item.wCode === val).wManager;
    },
    // 库区下拉框焦点事件
    handleAreaVisibleChange(visible) {
      if (visible) {
        const query = {
          wCode: this.warehouseForm.wCode,
          slCode: this.warehouseForm.slCode
        };
        this.getAreaList(query);
      }
    },
    // 查询库区列表
    getAreaList(query) {
      this.areaList = [];
      getSaCode(query).then(response => {
        this.areaList = response.data;
      })
    },
    // 库区下拉框选择事件
    handleAreaChange(val) {
      if (val === '' || val === undefined) {
        return;
      }
      this.warehouseForm.saCode = val;
      const wCode = this.areaList.find(item => item.saCode === val).wCode;
      const wName = this.areaList.find(item => item.saCode === val).wName;
      const wManager = this.areaList.find(item => item.saCode === val).wManager;

      this.warehouseList = [{
        wCode: wCode,
        wName: wName
      }];

      this.warehouseForm.wCode = wCode;
      this.warehouseForm.wName = wName;
      this.warehouseForm.wManager = wManager;
    },
    // 库区清除事件
    handleAreaClear() {
      this.warehouseForm.saCode = null;
      this.warehouseForm.saName = null;
      this.warehouseForm.wCode = null;
      this.warehouseForm.wName = null;
      this.areaList = [];
      this.warehouseList = [];
    },
    // 库位下拉框焦点事件
    handleLocationVisibleChange(visible) {
      if (visible) {
        const query = {
          wCode: this.warehouseForm.wCode,
          saCode: this.warehouseForm.saCode
        };
        this.getLocationList(query);
      }
    },
    // 查询库位列表
    getLocationList(query) {
      this.locationList = [];
      getSlCode(query).then(response => {
        this.locationList = response.data;
      })
    },
    // 库位选择事件
    handleLocationChange(val) {
      if (val === '' || val === undefined) {
        this.isWarehouseSelected = false;
        return;
      }
      this.warehouseForm.slCode = val;

      const wCode = this.locationList.find(item => item.slCode === val).wCode;
      const wName = this.locationList.find(item => item.slCode === val).wName;
      const wManager = this.locationList.find(item => item.slCode === val).wManager;
      const saCode = this.locationList.find(item => item.slCode === val).saCode;
      const saName = this.locationList.find(item => item.slCode === val).saName;
      const slName = this.locationList.find(item => item.slCode === val).slName;

      this.warehouseList = [{
        wCode: wCode,
        wName: wName
      }];
      this.areaList = [{
        saCode: saCode,
        saName: saName
      }];

      this.warehouseForm.wCode = wCode;
      this.warehouseForm.wName = wName;
      this.warehouseForm.wManager = wManager;
      this.warehouseForm.saCode = saCode;
      this.warehouseForm.saName = saName;
      this.warehouseForm.slName = slName;

      this.isWarehouseSelected = true;
    },
    // 库位清除事件
    handleLocationClear() {
      this.warehouseReset();
      this.locationList = [];
      this.warehouseList = [];
      this.areaList = [];
      this.isWarehouseSelected = false;
    },
  }
}
</script>

<template>
  <div class="app-container">
    <div class="page-body">
      <el-divider>
        <div class="my-divider">基础信息</div>
      </el-divider>

      <el-form ref="form" :model="form" size="small" :inline="true" :rules="rules">
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="入库单名称" prop="prName" label-width="92px">
              <el-input v-model="form.prName" placeholder="请输入" class="formInput" />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="入库日期" prop="prReceiptDate" label-width="92px">
              <el-date-picker clearable
                              type="date"
                              v-model="form.prReceiptDate"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择入库时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="工单名称" prop="prOrderName" label-width="92px">
              <el-input
                placeholder="请选择"
                v-model="form.prOrderName"
                class="formInput"
                readonly
              >
                <i slot="suffix" class="el-icon-search" @click="handleOrderSearch"></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="工单编号" prop="prOrderCode" label-width="92px">
              <el-input v-model="form.prOrderCode" placeholder="请输入" readonly class="formInput" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="24" :offset="2">
            <el-form-item label="备注" prop="prDesc" label-width="92px">
              <el-input v-model="form.prDesc" placeholder="请输入" type="textarea" class="formTextarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider>
          <div class="my-divider">入库明细</div>
        </el-divider>

        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="产品名称" prop="prProductName" label-width="92px">
              <el-input v-model="form.prProductName" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="产品编号" prop="prProductCode" label-width="92px">
              <el-input v-model="form.prProductCode" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="规格型号" prop="prProductSpecType" label-width="92px">
              <el-input v-model="form.prProductSpecType" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="产品类型" prop="prGoodType" label-width="92px">
              <el-select
                v-model="form.prGoodType"
                placeholder="请选择"
                disabled
              >
                <el-option v-for="dict in getGbsGoodType" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="单位" prop="prProductUnitName" label-width="92px">
              <el-input v-model="form.prProductUnitName" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="批次号" prop="prBatch" label-width="92px">
              <el-select
                v-model="form.prBatch"
                placeholder="请选择"
                clearable
                filterable
                class="formInput"
                remote
                :remote-method="handleBatchSearch"
                :loading="batchLoading"
                @visible-change="handleBatchVisibleChange"
              >
                <el-option
                  v-for="item in batchList"
                  :key="item"
                  :label="item"
                  :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="入库数量" prop="prReceiptNum" label-width="92px">
              <el-input v-model="form.prReceiptNum" placeholder="请输入" class="formInput" />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="生产日期" prop="prProductionDate" label-width="92px">
              <el-date-picker clearable
                              type="date"
                              v-model="form.prProductionDate"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择生产日期"
                              :picker-options="startDateOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="到期日期" prop="prExpirationDate" label-width="92px">
              <el-date-picker clearable
                              type="date"
                              v-model="form.prExpirationDate"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择到期日期"
                              :picker-options="endDateOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="仓库名称" prop="prWName" label-width="92px">
              <el-input v-model="form.prWName" placeholder="请选择" class="formInput" readonly>
                <i slot="suffix" class="el-icon-search" @click="handleWarehouseSearch"></i>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="仓库负责人" prop="wManager" label-width="92px">
              <el-input v-model="form.wManager" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-divider />

      <el-row class="mb8">
        <el-col :span="24" style="text-align: center">
          <el-button type="primary" @click="handlePageSubmit">确定</el-button>
          <el-button @click="handlePageClose">取消</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 工单搜索弹出层 -->
    <el-dialog :title="orderSearchTitle" :visible.sync="orderSearchOpen" width="1100px" append-to-body @close="handleOrderClose">
      <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
        <div style="margin-left: 50px">
          <el-row :gutter="20" class="mb8">
            <el-col :span="5" :offset="0">
              <el-form-item prop="orderVo">
                <el-input v-model="queryParams.orderVo" placeholder="工单名称/编号" class="formInput" @keyup.enter.native="handleOrderQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item prop="productVo">
                <el-input v-model="queryParams.productVo" placeholder="产品名称/编号" class="formInput" @keyup.enter.native="handleOrderQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item prop="productVo">
                <el-select
                  v-model="queryParams.prGoodType"
                  placeholder="产品类型"
                  class="formSelect"
                  clearable
                >
                  <el-option
                    v-for="dict in getGbsGoodType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleOrderQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetOrderQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-table v-loading="orderLoading" :data="orderList" border highlight-current-row @current-change="handleOrderTableChange">
        <el-table-column label="工单编号" align="center" prop="prOrderCode" />
        <el-table-column label="工单名称" align="center" prop="prOrderName" />
        <el-table-column label="产品编号" align="center" prop="prProductCode" />
        <el-table-column label="产品名称" align="center" prop="prProductName" />
        <el-table-column label="规格型号" align="center" prop="prProductSpecType" />
        <el-table-column label="产品类型" align="center" prop="prGoodType">
          <template slot-scope="scope">
            <dict-tag :options="getGbsGoodType" :value="scope.row.prGoodType" />
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="prProductUnitName" />
      </el-table>

      <pagination
        v-show="orderTotal>0"
        :total="orderTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getOrderList"
      />

      <el-divider/>

      <el-row>
        <el-col :span="24" style="text-align: center" :offset="9">
          <el-button type="primary" @click="handleOrderConfirm" :disabled="!isOrderSelected">确定</el-button>
          <el-button @click="handleOrderClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 仓库搜索弹出层 -->
    <el-dialog :title="warehouseSearchTitle" :visible.sync="warehouseSearchOpen" width="800px" append-to-body @close="handleWarehouseClose">
      <el-form ref="warehouseForm" :model="warehouseForm" size="small" :inline="true">
        <div style="margin-left: 40px">
          <el-row :gutter="20" class="mb8">
            <el-col :span="24" :offset="0">
              <el-select
                v-model="warehouseForm.wCode"
                placeholder="选择仓库"
                class="formSelect"
                clearable
                style="margin-right: 10px"
                @visible-change="handleWarehouseVisibleChange"
                @change="handleWarehouseChange"
              >
                <el-option v-for="item in warehouseList" :key="item.wCode" :label="item.wName" :value="item.wCode" />
              </el-select>
              <el-select
                v-model="warehouseForm.saCode"
                placeholder="选择库区"
                class="formSelect"
                clearable
                style="margin-right: 10px"
                @visible-change="handleAreaVisibleChange"
                @change="handleAreaChange"
                @clear="handleAreaClear"
              >
                <el-option v-for="item in areaList" :key="item.saCode" :label="item.saName" :value="item.saCode" />
              </el-select>
              <el-select
                v-model="warehouseForm.slCode"
                placeholder="选择库位"
                class="formSelect"
                clearable
                @visible-change="handleLocationVisibleChange"
                @change="handleLocationChange"
                @clear="handleLocationClear"
              >
                <el-option v-for="item in locationList" :key="item.slCode" :label="item.slName" :value="item.slCode" />
              </el-select>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-divider/>

      <el-row>
        <el-col :span="24" style="text-align: center" :offset="9">
          <el-button type="primary" @click="handleWarehouseConfirm" :disabled="!isWarehouseSelected">确定</el-button>
          <el-button @click="handleWarehouseClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.page-body {
  width: 1000px;
  margin: 0 auto;
}

.formInput,.formSelect {
  width: 220px;
}

.formTextarea {
  width: 721px;
}
</style>
